﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/carts.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/carts.js"></script>

</head>

<body>

 	<div>
    	<iframe src="Header.html" style="width: 100%;border: none;"></iframe>
    </div>

<div id="contentWrapper">
    <section class="cartMain">
        <div class="cartMain_hd">
            <ul class="order_lists cartTop">
                <li class="list_chk">
                    <!--所有商品全选-->
                    <input type="checkbox" id="all" class="whole_check">
                    <label for="all"></label>
                    全选
                </li>
                <li class="list_con">商品信息</li>
                <li class="list_info"></li>
                <li class="list_price">单价</li>
                <li class="list_amount">数量</li>
                <li class="list_sum">金额</li>
                <li class="list_op">操作</li>
            </ul>
        </div>

        <div class="cartBox"  v-for="(temp,index) in shoopcarts">
            <div class="shop_info">
                <div class="all_check">
                    <!--店铺全选-->
                    <input type="checkbox" id="'shop_a" class="shopChoice">
                    <label for="'shop_a"  class="shop"></label>
                </div>
                <div class="shop_name" >
                    店铺：<a href="javascript:;">{{temp.storename}}</a>
                </div>
            </div>
            <div class="order_content">
                <ul class="order_lists">
                    <li class="list_chk">
                        <input type="checkbox" id="'checkbox_1" class="son_check">
                        <label for="'checkbox_1"></label>
                    </li>
                    <li class="list_con">
                        <div class="list_img"><a href="javascript:;"><img :src="temp.cover" alt=""></a></div>
                        <div class="list_text"><a href="javascript:;">{{temp.name}}</a></div>
                    </li>
                  <li class="list_info">
                        <p></p>
                        <p></p>
                    </li>
                    <li class="list_price">
                        <p class="price">￥{{temp.price}}</p>
                    </li>
                    <li class="list_amount">
                        <div class="amount_box">
                            <a href="javascript:;" class="reduce reSty">-</a>
                            <input type="text" v-bind:value="temp.number" class="sum">
                            <a href="javascript:;" class="plus">+</a>
                        </div>
                    </li>
                    <li class="list_sum">
                        <p class="sum_price">￥980</p>
                    </li>
                    <li class="list_op">
                        <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
                    </li>
                </ul>

            </div>
        </div>



        <!--底部-->
        <div class="bar-wrapper">
            <div class="bar-right">
                <div class="piece">已选商品<strong class="piece_num">0</strong>件</div>
                <div class="totalMoney">共计: <strong class="total_text">0.00</strong></div>
                <div class="calBtn"><a href="PostOrder.html">结算</a></div>
            </div>
        </div>
    </section>
    <section class="model_bg"></section>
    <section class="my_model">
        <p class="title">删除宝贝<span class="closeModel">X</span></p>
        <p>您确认要删除该宝贝吗？</p>
        <div class="opBtn"><a href="javascript:;" class="dialog-sure">确定</a><a href="javascript:;" class="dialog-close">关闭</a></div>
    </section>
	</div>

	<div style="text-align:center;">
</div>

 <script src="js/vue.js"></script>
<script>


var vm = new Vue({
	el : "#contentWrapper",
	data : {
		shoopcarts:[],
	},

	methods : {
		selectShoopcarts:function(){
			var vms=this;
			$.ajax({
				type : "post",
				url : "/shoopcart/selectShoopCartByUserid",
				contentType : "application/json",
				dataType : "json",
				success : function(json) {
					vms.shoopcarts=json.data;
				}
			});
		},addCart:function(id){
				var vms=this;
				var good={};
				$.ajax({
					type : "post",
					url : "/commodity/queryById/"+id,
					contentType : "application/json",
					dataType : "json",
					data:JSON.stringify({}),
					success : function(json) {
						good=json.data;

						var addgood={};
						addgood.number=1;
						addgood.cid=id;
						addgood.price=good.current;
					$.ajax({
						type : "post",
						url : "/shoopcart/addCart",
						contentType : "application/json",
						dataType : "json",
						data:JSON.stringify(addgood),
						success : function(json) {
							if(json.returnCode==200){
								alert("加入购物车成功");
							}else if(json.returnCode==405){
								alert("您还未登录，请先登录才能加入购物车哦");
							}else if(json.returnCode==500){
								alert("加入购物车失败");
							}
						}
					});
					}
				});




		},addCollection:function(id){
				var con={};
				con.cid=id;
			$.ajax({
				type : "post",
				url : "/commodity/addcollection",
				contentType : "application/json",
				dataType : "json",
				data:JSON.stringify(con),
				success : function(json) {
					if(json.returnCode==200){
						alert(json.returnMsg);
					}else if(json.returnCode==405){
						alert("您还未登录，请先登录才能收藏哦");
					}else if(json.returnCode==500){
						alert("收藏失败");
					}
				}
			});

		},lookGood:function(id){
            localStorage.setItem("gid",id);
			location.href="GoodsDetail.html";
		},selectTypes:function(){
			var vms=this;
			$.ajax({
				type : "post",
				url : "/commodity/selectCommdityTypes",
				contentType : "application/json",
				dataType : "json",
				success : function(json) {
					vms.types=json.data;
				}
			});
		}

	},
	created : function() {
		var vms = this;
		vms.selectShoopcarts();
	}, //属性过滤器
	filters : {}

});
</script>


</body>
</html>
